<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
<!--  <label for="agree">-->
<!--    <input type="checkbox" id="agree" v-model="isAgree">同意协议-->
<!--  </label>-->
<!--  <button :disabled="!isAgree">下一步</button>-->
<!--  <h2>isAgree的值是{{isAgree}}</h2>-->
  <input type="checkbox" value="篮球" v-model="hobbies">篮球
  <input type="checkbox" value="足球" v-model="hobbies">足球
  <input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
  <input type="checkbox" value="排球" v-model="hobbies">排球
  <h2>您的爱好是：{{hobbies}}</h2>

<!--  值绑定：就是v-bind-->
  <lable v-for="item in originHobbies">
    <input type="checkbox" :value="item" id="item" v-model="hobbies">{{item}}
  </lable>
</div>
  <script src="../../../project_practice/lunbotu/vue.js"></script>
  <script>
    const app = new Vue({
      el:'#app',
      data:{
        message:"你好啊！！",
        isAgree:false,
        hobbies:[],
        originHobbies:['篮球','足球','乒乓球','羽毛球','台球','高尔夫球']
      }
    })
  </script>
</body>
</html>